<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>书签管理系统</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>📚 书签管理系统</h1>
            <div class="header-actions">
                <button id="addBookmarkBtn" class="btn btn-primary">
                    <span>➕</span> 添加书签
                </button>
                <button id="addCategoryBtn" class="btn btn-secondary">
                    <span>🏷️</span> 添加分类
                </button>
                <button id="exportBtn" class="btn btn-outline">
                    <span>📤</span> 导出
                </button>
                <button id="importBtn" class="btn btn-outline">
                    <span>📥</span> 导入
                </button>
                <input type="file" id="importFile" accept=".json" style="display: none;">
            </div>
        </header>

        <main>
            <!-- 搜索和筛选区域 -->
            <div class="search-section">
                <input type="text" id="searchInput" placeholder="🔍 搜索书签名称、地址或备注..." class="search-input">
                <select id="categoryFilter" class="category-filter">
                    <option value="">所有分类</option>
                </select>
                <select id="sortBy" class="sort-select">
                    <option value="sort">按排序</option>
                    <option value="name">按名称</option>
                    <option value="created">按创建时间</option>
                </select>
            </div>

            <!-- 分类导航 -->
            <div class="categories-nav" id="categoriesNav">
                <div class="category-tab active" data-category="">
                    <span>全部</span>
                    <span class="count" id="allCount">0</span>
                </div>
            </div>

            <!-- 书签列表 -->
            <div class="bookmarks-container">
                <div id="bookmarksList" class="bookmarks-list">
                    <!-- 书签项将通过JavaScript动态添加 -->
                </div>
                <div id="emptyState" class="empty-state">
                    <div class="empty-icon">📝</div>
                    <h3>暂无书签</h3>
                    <p>点击"添加书签"开始创建您的第一个书签</p>
                </div>
            </div>
        </main>
    </div>

    <!-- 添加/编辑书签模态框 -->
    <div id="bookmarkModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="modalTitle">添加书签</h2>
                <button class="close-btn" id="closeModal">&times;</button>
            </div>
            <form id="bookmarkForm" class="modal-body">
                <div class="form-group">
                    <label for="bookmarkName">名称 *</label>
                    <input type="text" id="bookmarkName" required placeholder="请输入书签名称">
                </div>
                <div class="form-group">
                    <label for="bookmarkUrl">地址 *</label>
                    <input type="url" id="bookmarkUrl" required placeholder="https://example.com">
                </div>
                <div class="form-group">
                    <label for="bookmarkCategory">分类</label>
                    <select id="bookmarkCategory">
                        <option value="">未分类</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="bookmarkSort">排序</label>
                    <input type="number" id="bookmarkSort" min="0" value="0" placeholder="数字越小越靠前">
                </div>
                <div class="form-group">
                    <label for="bookmarkNotes">备注</label>
                    <textarea id="bookmarkNotes" rows="3" placeholder="可选的备注信息"></textarea>
                </div>
                <div class="modal-actions">
                    <button type="button" class="btn btn-outline" id="cancelBtn">取消</button>
                    <button type="submit" class="btn btn-primary" id="saveBtn">保存</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 添加分类模态框 -->
    <div id="categoryModal" class="modal">
        <div class="modal-content small">
            <div class="modal-header">
                <h2>添加分类</h2>
                <button class="close-btn" id="closeCategoryModal">&times;</button>
            </div>
            <form id="categoryForm" class="modal-body">
                <div class="form-group">
                    <label for="categoryName">分类名称 *</label>
                    <input type="text" id="categoryName" required placeholder="请输入分类名称">
                </div>
                <div class="form-group">
                    <label for="categoryColor">颜色</label>
                    <select id="categoryColor">
                        <option value="#007bff">蓝色</option>
                        <option value="#28a745">绿色</option>
                        <option value="#dc3545">红色</option>
                        <option value="#ffc107">黄色</option>
                        <option value="#6f42c1">紫色</option>
                        <option value="#fd7e14">橙色</option>
                        <option value="#20c997">青色</option>
                        <option value="#e83e8c">粉色</option>
                    </select>
                </div>
                <div class="modal-actions">
                    <button type="button" class="btn btn-outline" id="cancelCategoryBtn">取消</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 确认删除模态框 -->
    <div id="confirmModal" class="modal">
        <div class="modal-content small">
            <div class="modal-header">
                <h2>确认删除</h2>
                <button class="close-btn" id="closeConfirmModal">&times;</button>
            </div>
            <div class="modal-body">
                <p id="confirmMessage">确定要删除这个书签吗？</p>
                <div class="modal-actions">
                    <button type="button" class="btn btn-outline" id="cancelDeleteBtn">取消</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteBtn">删除</button>
                </div>
            </div>
        </div>
    </div>

    <script src="storage.js"></script>
    <script src="app.js"></script>
</body>
</html>